<template name="preOpenItem">
	<view class="orderItem">
		<view class="shopBox">
			<text class="iconfont icon-shoucangdianjia" @tap="toShop"></text>
			<text class="shopName" @tap="toShop">{{orderItem.store.name.length>10?orderItem.store.name.substr(0,10)+'...':orderItem.store.name}}</text>
			<text class="iconfont icon-right" @tap="toShop"></text>
			<text class="orderStatus"  @tap="toOrderDt">已开课</text>
		</view>
		<view class="goodBox" @tap="toOrderDt">
			<image class="goodImg" :src="orderItem.img"  ></image>
			<view class="infoBox">
				<text class="goodName" >{{orderItem.name}}</text>
				<view class="priceBox">
					<text>已付{{orderItem.payStatus!=1?'全款':'预约金'}}:</text>
					<text class="price">￥{{orderItem.payStatus!=1?(orderItem.price - orderItem.discount).toFixed(2):orderItem.prepay}}</text>
				</view>
				<view class="btnBox">
					<button class="orderOp" v-if="orderItem.groupId"  @tap.stop="getmyGroupDetail">拼团详情</button>					
					<button v-if="orderItem.voted!=1" class="orderOp" @tap.stop="toPage" data-url="addEvaluate" :data-oid="orderItem.orderNo">去评价</button>
				</view>
				
				
			</view>
		</view>
	</view>
</template>

<script>
	// vuex 导入
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		name: 'preOpenItem',
		// 计算属性
		computed: {
			
		},
		// 传递参数
		props: {
			orderItem: {
				type: Object,
				default: null
			},
			showStatus:{
				type:Number,
				default:0
			}
		},
		// 自身参数
		data() {
			return {
				statusArr:['全部','待支付预约金','待支付尾款','待支付付全款','待体验','待开课','退款中','已退款','已关闭','已完成'],
				txtArr:['已支付','待支付预约金','待支付尾款','待支付付全款','已支付','已付全款','已支付','已支付','已支付','已支付'],
				goodInfo:null,
			}
		},
		// 方法
		methods: {
			getData(){
				
			},
			getmyGroupDetail(){
				
				if(this.orderItem.spellType==1){
					this.toPage({
						url:'myGroupDetailnew',
						id:this.orderItem.groupId,
						stay:this.orderItem.status,
						
					})
				}else if(this.orderItem.groupId&&this.orderItem.actId && this.orderItem.actId!=0){
					this.toPage({
						url:'myGroupDetaillm',
						id:this.orderItem.groupId,
						stay:this.orderItem.status,
						actId:this.orderItem.actId
					})
				}else if(this.orderItem.groupId){
					this.toPage({
						url:'myGroupDetail',
						id:this.orderItem.groupId,
						stay:this.orderItem.status
					})
					
				}
				
				
			},
			// 去店铺详情
			toShop(){
				this.toPage({
					url:'shopDetail',
					id:this.orderItem.store.id
				})
			},
			toPay(){
				this.toPage({
					url:'pay',
					id:this.orderItem.orderNo
				})
			},
			toWeikuan(){
				this.toPage({
					url:'pay',
					id:this.orderItem.orderNo,
					paytype:this.orderItem.payType
				})
			},
			toOrderDt(){
				this.toPage({
					url:'orderDt',
					id:this.orderItem.orderNo
				})
				// if(this.orderItem.status==6||this.orderItem.status==7){
				// 	this.toPage({
				// 		url:'refoundDt',
				// 		oid:this.orderItem.orderId,
				// 		ono:this.orderItem.orderNo
				// 	})
				// }else{
					
					
				// }
				
			}
		},
		// created声明周期
		created() {

		},

	}
</script>

<style lang="less" scoped>
	.orderItem {
		border-radius: 10upx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		display: flex;
		flex-direction: column;
		margin-bottom: 18upx;
		padding: 36upx 20upx 36upx 36upx;
		.shopBox {
			display: flex;
			align-items: center;
			.iconfont{
				font-size: 36upx;
			}
			.icon-shoucangdianjia{
				color: #202932;
				margin-right: 6upx;
			}
			.icon-right{
				color: #c9c9c9;
			}
			.orderStatus{
				color: #ffb423;
				font-size: 28upx;
				margin-top: -4upx;
				flex-grow: 1;
				text-align: right;
			}
			.shopName{
				font-size: 32upx;
				color: #202932;
				margin-top: -4upx;
			}
		}
		.goodBox{
			display: flex;
			margin-top: 32upx;
			.goodImg{
				width: 180upx;
				height: 180upx;
				border-radius: 8upx;
				margin-right: 20upx;
				flex-shrink: 0;
			}
			.infoBox{
				display: flex;
				flex-grow: 1;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
			}
			.goodName{
				font-size: 28upx;
				color: #202932;
			}
			.priceBox{
				display: flex;
				color: #202932;
				font-size: 28upx;
				align-items: baseline;
			}
			.btnBox{
				width: 100%;
				height: 50upx;
				display: flex;
				justify-content: flex-end;
			}
			.orderOp{
				height: 50upx;
				line-height: 48upx;
				font-size: 28upx;
				color: #ffa023;
				border-radius: 25upx;
				padding: 0 40upx;
				border: 1px solid #ffa023;
				background-color: rgba(0,0,0,0);
				margin: 0;
				align-self: flex-end;
				margin-left:30upx;
			}
			.orderOp:after{
				outline: none;
				border: none;
			}
			.price{
				color: #ff2020;
				font-weight: bold;
			}
		}
	}
</style>
